<template>
  <div v-if="hasAccess">
    <slot />
  </div>
  <div v-else-if="showFallback" class="no-permission">
    <el-empty description="您没有权限访问此内容" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAuth } from '@/composables/useAuth'

const props = defineProps({
  // 需要的权限（单个权限字符串）
  permission: {
    type: String,
    default: ''
  },
  // 需要的权限列表（任一权限）
  anyPermissions: {
    type: Array,
    default: () => []
  },
  // 需要的权限列表（所有权限）
  allPermissions: {
    type: Array,
    default: () => []
  },
  // 需要的角色
  role: {
    type: String,
    default: ''
  },
  // 需要的角色列表
  roles: {
    type: Array,
    default: () => []
  },
  // 是否显示无权限提示
  showFallback: {
    type: Boolean,
    default: false
  }
})

const { hasPermission, hasAnyPermission, hasAllPermissions, userRole } = useAuth()

const hasAccess = computed(() => {
  // 检查单个权限
  if (props.permission && !hasPermission(props.permission)) {
    return false
  }

  // 检查任一权限
  if (props.anyPermissions.length > 0 && !hasAnyPermission(props.anyPermissions)) {
    return false
  }

  // 检查所有权限
  if (props.allPermissions.length > 0 && !hasAllPermissions(props.allPermissions)) {
    return false
  }

  // 检查单个角色
  if (props.role && userRole.value !== props.role) {
    return false
  }

  // 检查角色列表
  if (props.roles.length > 0 && !props.roles.includes(userRole.value)) {
    return false
  }

  return true
})
</script>

<style scoped>
.no-permission {
  padding: 40px;
  text-align: center;
}
</style>
